<template>
	<base-page>
		<view slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<cu-custom :isBack="true" bgColor="bg-white">
				<block slot="content">{{isshowInput==false? '提现':'实名认证'}}</block>
			</cu-custom>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block>
				<cu-custom :isBack="true" bgColor="bg-white">
					<block slot="content">{{isshowInput==false? '提现':'实名认证'}}</block>
				</cu-custom>
			</block>
			<!-- #endif -->
		</view>
		<view slot="center" class="auto-100 ">

			<view class="section bg-gray">
				<view class="way-wrapper ">
					<view class="item"> 提现至:</view>
					<view class="way-content df-ai-cen flex1">
						<picker mode="selector" :range='way' :range-key='way1' @change="wayChange" class="df-ai-cen">
							<view class="df-ai-cen" style='width:100%'>
								<view class="way-icon">
									<image v-if="cashWay==0"
										src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/wallet/wechat.png">
										<image v-if="cashWay==1"
											src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/wallet/alipay.png">
								</view>
								<view class="way">
									{{way2?way2:'请选择提现方式'}}
								</view>
								<view class="icon">
									<image
										src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png">
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="money-wrapper bg-white">
					<block>
						<view class="txt" v-if="Number(money)>Number(balance_money)">输入金额超过钱包金额</view>
					</block>
					<view class="money boder-padding">
						<text>￥</text>
						<input placeholder="" v-model="money" type="number" class="ipt" />
					</view>
					<block v-if="withDrawInfo!=null">
						<view class="charge-wrapper " style="padding-bottom:10rpx;">
							<view class="text">可提现余额为:{{balance_money}}元</view>
							<view class="text" style="color:red;" @click="allin">全部提现</view>
						</view>
						<view class="charge-wrapper " style="padding-bottom:10rpx;">
							<view class="text">最底提现金额为:{{withDrawInfo.config.min}}元</view>
						</view>
						<view class="charge-wrapper " style="padding-bottom:10rpx;">
							<view class="text">手续费为:{{withDrawInfo.config.rate}}%</view>
						</view>
					</block>
				</view>
				<view class="btn bg-gradual-orange round" @click="submitWithdraw">确定</view>
			</view>

			<block v-if="isshowInput==true">
				<view class="inputboxs">
					<view class="wrapper bg-white">
						<view class="tipTextinfo" style="font-size: 40rpx;">提现必须实名！</view>
						<view class="tipRed" style="font-size: 35rpx;">请填写个人真实信息，否则银行不予转账！</view>
						<view class="info-wrapper">
							<view class="name  boder-padding">
								<view class="item ">真实姓名</view>
								<input placeholder="请填写个人真实信息，以免影响提现" v-model="name" type="text" class="ipt" />
							</view>
							<view class="name  boder-padding">
								<view class="item ">手机号码</view>
								<input placeholder="请输入手机号码" v-model="mobile" type="number" maxlength="11"
									class="ipt" />
							</view>
						</view>
					</view>
					<view class="btnbosx">
						<view class="confirmBtnNot" @click="closeGbnot">取消</view>
						<view class="confirmBtn" @click="submitVote">确定</view>
					</view>
					<view class="tipTextinfo">信息提交后不可修改</view>
				</view>
			</block>

			<block v-if="showBdwx==true">
				<view class="showTipBg-box"></view>
				<view class="">
					<view class="bdwxTip">
						<view class="tiptextinfo" style="padding-top: 60rpx;font-weight: bold;">需要先绑定微信，才能提现哦</view>
						<view class="bdwxIcon">
							<image :src="staticImgUrl+'yxjhd/bdwx.png'" mode=""></image>
						</view>
						<view class="tiptextinfo">无法绑定微信，请更新APP</view>
						<view class="tiptextinfo">有疑问可咨询醒目购公众号</view>
						<!-- #ifdef H5 -->
						<button type="default" class="bdBtn" @click="appLogin" v-if="isNativeApp()">绑定微信</button>
						<!-- #endif -->
					</view>
				</view>
			</block>

		</view>
	</base-page>
</template>

<script>
	import {
		memberWithdraw,
		applyMemberWithdraw
	} from '@/common/js/request/modules/public.js'
	import $Axios from '@/common/js/request/http.js';
	import $Sdk from '@/common/js/sdk.js'
	export default {
		data() {
			return {
				way: [
					'微信',
					// '支付宝'
				],
				way1: '',
				way2: '',
				cashWay: 2,
				money: 0,
				balance_money: 0,
				withDrawInfo: null,
				moneyWithdraw: 0,
				rate: 0,
				isshowInput: false,
				name: '',
				mobile: '',
				showBdwx: false
			};
		},
		onLoad(e) {

		},
		onShow(e) {
			this.getInfo()
			// #ifdef H5

			console.log(window.getTurntableInfo(), '6666666')
			this.getappLogin()
			let timer = setInterval(() => {
				window.getTurntableInfo = e => {
					console.log(e, 'getTurntableInfo')
					if (e != undefined && e != '') {
						console.log('拿到数据', e)
						uni.showLoading({
							title: '请稍候'
						})
						$Axios.post(`api/login/updateOpenId`, {
							code: e
						}).then(res => {
							// console.log(res)
							setTimeout(() => {
								uni.hideLoading()
								this.$Utils.tip('授权成功')
								this.showBdwx = false
							}, 800)
						})
						clearInterval(timer)
					}
				}
			}, 400)

			// #endif
		},
		methods: {
			closeGbnot() {
				this.isshowInput = false
			},
			wayChange(e) {
				if (e.detail.value == 0) {
					this.way1 = 'wechatpay'
					this.way2 = '微信'
					this.cashWay = 0
					$Axios.post(`api/memberbankaccount/defaultinfo`).then(res => {
						if (res == null) {
							this.$Utils.tip('请填写提现信息')
							setTimeout(() => {
								this.isshowInput = true
							}, 800)
						}
					})

				}
				// if (!e.detail.value) {
				//     this.way1 = 'wechatpay'
				//     this.way2 = '微信'
				//     this.cashWay = 0
				// } else {
				//     this.way1 = 'alipay'
				//     this.way2 = '支付宝'
				//     this.cashWay = 1
				// }
			},
			getInfo() {
				$Axios.post(`api/memberwithdraw/info`).then(res => {
					this.withDrawInfo = res
					this.balance_money = Number(res.member_info.balance_money)
				})

			},
			allin() {
				this.money = Number(this.balance_money)
			},
			submitWithdraw() {
				if (this.way1 == '') {
					return this.$Utils.tip('请选择提现方式')
				}
				if (Number(this.money) <= 0) {
					return this.$Utils.tip('请输入提现金额')
				}
				if (Number(this.money) > Number(this.balance_money)) {
					return this.$Utils.tip('亲，超过钱包金额')
				}
				if (Number(this.money) < Number(this.withDrawInfo.config.min)) {
					return this.$Utils.tip(`亲，最低提现${this.withDrawInfo.config.min}元`)
				}
				$Axios.post(`api/memberbankaccount/defaultinfo`).then(res => {
					if (res == null) {
						this.isshowInput = true
						return
					} else {
						$Axios.post(`api/memberwithdraw/apply`, {
							apply_money: this.money,
							mobile: res.mobile,
							transfer_type: this.way1,
							realname: res.realname,
						}).then(res => {
							console.log(res)
							uni.showLoading({
								title: '请稍候'
							})
							setTimeout(() => {
								uni.hideLoading()
								this.$Router.push({
									name: 'WithdrawProcess'
								})
							}, 500)
						})
					}
				})

			},
			submitVote() {
				if (this.name == '') {
					this.$Utils.tip('请输入姓名')
					return
				}
				if (!this.$Utils.regCheckAll.isPhone(this.mobile)) {
					return this.$Utils.tip('请输入正确手机号码')
				}
				$Axios.post(`api/memberbankaccount/add`, {
					realname: this.name,
					mobile: this.mobile,
					withdraw_type: this.way1
				}).then(res => {
					console.log(res)
					this.isshowInput = false
				})
			},
			getappLogin() {
				$Axios.post(`api/login/checkAppOpenId`).then(res => {
					if (res.app_wx_openid == '') {
						console.log('没有app授权')
						this.showBdwx = true
					} else {
						this.showBdwx = false
					}
				})
			},
			appLogin() {
				console.log("调用原生微信授权登录")
				this.$Sdk.toLogin()
			}
		},
		mounted() {

		}
	};
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.showTipBg-box {
		position: absolute;
		left: 0px;
		top: 0px;
		background: rgba(0, 0, 0, 0.8);
		width: 100%;
		/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		height: 100%;
		filter: alpha(opacity=80);
		/*设置透明度为60%*/
		opacity: 0.8;
		/*非IE浏览器下设置透明度为60%*/
		z-index: 9999;
	}

	.closeTipIcon {
		position: fixed;
		top: 22%;
		left: 81%;
		transform: translate(-50%, -50%);
		width: 65rpx;
		height: 65rpx;
		z-index: 99999;
	}

	.bdwxTip {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 540rpx;
		height: 760rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		z-index: 99999;
	}

	.bdwxIcon {
		width: 268rpx;
		height: 268rpx;
		margin: 38rpx auto;
	}

	.tiptextinfo {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #222222;
		padding-top: 10rpx;
	}

	.bdBtn {
		width: 400rpx;
		height: 88rpx;
		background: #6CB47A;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 72rpx;
	}

	uni-button:after {
		content: none;
	}

	.inputboxs {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99999;
	}

	.btn {
		margin: 50px auto;
		width: 60%;
		padding: 10px 0;
		text-align: center;
		font-size: 16px;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.boder-padding {
		background-color: #fff;
		padding: 15px 15px;
		border-bottom: 1px solid #f4f4f4;
	}

	.section {
		height: 100%;

		.boder-padding {
			background-color: #fff;
			padding: 15px 0;
			border-bottom: 1px solid #f4f4f4;
		}

		.way-wrapper {
			border-bottom: 3px solid #f4f4f4;
			border-top: 3px solid #f4f4f4;
			background-color: #fff;
			padding: 15px 10px;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.item {
				margin-right: 5px;
			}

			.way {
				width: 100%;
			}

			.way-icon {
				image {
					width: 36px;
					height: 36px;
				}
			}

			.icon {
				width: 16px;
				height: 16px;
			}
		}

		.money-wrapper {
			padding: 15px 10px;

			.txt {
				color: #fd4258;
			}

			.money {
				color: #222222;
				font-weight: bold;
				margin-bottom: 10px;
				display: flex;
				align-items: center;

				text {
					font-size: 26px;
				}

				>input {
					font-size: 40px;
				}
			}

			.charge-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.info-wrapper {
		padding: 0px;
		font-size: 14px;

		.item {
			flex: 0.3;
			font-size: 14px;
			font-weight: bold;
		}
	}

	.confirmBtn {
		width: 280rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #D13520 1%, #FA553F 100%);
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.confirmBtnNot {
		width: 280rpx;
		height: 80rpx;
		background: #CCCCCC;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.tipTextinfo {
		padding-top: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FF0000;
	}

	.btnbosx {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tipRed {
		font-size: 26rpx;
		text-align: center;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}
</style>
